<template>
  <h1>{{ person.name }}</h1>
  <h1>{{ person.age }}</h1>
  <button @click="test">测试一下触发自定义事件</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "myDemo",
  props: ["msg", "school"],
  // Vue3中不写会有警告
  emits: ["hello"],
  // slots:['asd'],
  beforeCreate() {
    console.log("---beforeCreate---");
  },
  // (1) setup执行的比beforeCreate还早(提前准备好响应式数据)
  //   且setup的this为undefined(因为setup规范好了不使用this，避免像Vue2中this的指向问题)
  setup(props, context) {
    // (2) props参数指 父组件传递过来数据并且子组件中用props:[]接受好了，那么此时使用setup内的props就不会有警告(得准备好了)
    //     为什么需要setup里面的props?因为它已经把props[]接收到的数据转化成立proxy对象，使用可立即响应
    // (3) context上下文相当于以前的vm，可以获取以前vm很多内置属性attr、emit(没有$)
    //     在vue3有专门的emits属性，和props一样，这样写非常清晰，表示接受了什么自定义事件
    console.log("---setup---", props, context);
    console.log("---setup---", props, context.attrs);
    console.log("---setup---", props, context.emit);
    console.log("---setup---", props, context.slots);
    let person = reactive({
      name: "张三",
      age: 18,
    });

    function test() {
      context.emit("hello", "我是传递的值");
    }

    return {
      person,
      test
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
